<template>

    <div>
        <div class="subject" v-for="item in numData" :key="item.id">
            <span>{{ item.num1 }}</span>
            <span>+</span>
            <span>{{ item.num2 }}</span>
            <span>=</span>
            <input v-model="item.total" type="number"/>
            <button @click="getResult(item)">提交</button>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
        }
    },
    props: ['numData'],
    methods: {
        getResult(item) {
            this.$emit('input', item)
        }
    }

};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>